// txt color
@titleColor: rgba(0, 0, 0, 0.8);
@descColor: rgba(0, 0, 0, 0.6);
@labelColor: #777;
@infoColor: rgba(0, 0, 0, 0.5);
@linkColor: #26a1ff;
@linkColorActive: #ff480a;
@linkColorInactive: #888;
@linkColorDisabled: #bcbec2;
@borderColor: rgba(220, 220, 220, 0.6);
@borderColorDark: rgba(200, 200, 200, 0.6);
@tabTxtColor: #929292;
@tabTxtColorActive: #ff480a;
@lightTxtColor: #fff;
@gridColTxtColor: #929292; // 九宫格文字颜色
@gridColTxtColorHover: #26a1ff; // 九宫格文字hover颜色

// background
@defaultBg: #f6f7fb;
@paneBg: #fff;
@hoverBg: rgba(220, 220, 220, 0.4);
@activeBg: rgba(225, 225, 225, 0.8);
@inputBg: #f6f6f6;
@tableBg: #fff;
@maskBg: rgba(0, 0, 0, 0.5);

// header
@headerBg: #fff;
@headerDarkBg: #4eb3ff;
@headerSemiBg: rgba(100, 100, 100, 0.1);
@headerBtnColor: #666;
@headerLightBtnColor: #fff;

// button
@btnBg: #fff;
@btnBgPlain: #fff;
@btnBorderColor: #ebedf0;
@btnTxtColor: rgba(0, 0, 0, 0.7);
@btnTxtColorPlain: rgba(0, 0, 0, 0.7);

@btnBgPrimary: #4eb3ff;
@btnBgPrimaryPlain: rgba(78, 179, 255, 0.2);
@btnBorderColorPrimary: #4eb3ff;
@btnTxtColorPrimary: #fff;
@btnTxtColorPrimaryPlain: #4eb3ff;

@btnBgSuccess: #67c23a;
@btnBgSuccessPlain: rgba(103, 194, 58, 0.3);
@btnBorderColorSuccess: #67c23a;
@btnTxtColorSuccess: #fff;
@btnTxtColorSuccessPlain: #67c23a;

@btnBgInfo: rgba(0, 0, 0, 0.6);
@btnBgInfoPlain: rgba(0, 0, 0, 0.05);
@btnBorderColorInfo: rgba(0, 0, 0, 0.3);
@btnTxtColorInfo: #fff;
@btnTxtColorInfoPlain: rgba(0, 0, 0, 0.7);

@btnBgWarning: #e6a23c;
@btnBgWarningPlain: rgba(230, 162, 60, 0.3);
@btnBorderColorWarning: #e6a23c;
@btnTxtColorWarning: #fff;
@btnTxtColorWarningPlain: #e6a23c;

@btnBgDanger: #ff480a;
@btnBgDangerPlain: rgba(255, 72, 10, 0.3);
@btnBorderColorDanger: #ff480a;
@btnTxtColorDanger: #fff;
@btnTxtColorDangerPlain: #ff480a;

@btnBgDisabled: #f4f4f5;
@btnBorderColorDisabled: #e9e9eb;
@btnTxtColorDisabled: #bcbec2;

// 字号
@big1: 36px; // 突显数字1
@big2: 32px; // 突显数字2
@big3: 28px; // 突显数字3
@big4: 22px; // 突显数字4
@big5: 20px; // 突显数字5
@l1: 18px; // 一级标题
@l2: 16px; // 二级标题
@l3: 14px; // 三级标题
@l4: 13px; // 正文
@l5: 12px; // 备注

// 布局内外边距
@marginH: 12px; // 水平边距(默认)
@marginV: 12px; // 垂直边距(默认)
@marginH_lg: 20px; // 水平边距(大)
@marginV_lg: 20px; // page边距(大) 
@marginH_sm: 8px; // 水平边距(小)
@marginV_sm: 8px;	// 水平边距(小)
// @marginH_mini: 4px; // 水平边距(超小)
// @marginV_mini: 4px; // 水平边距(超小)


// 文本垂直居中
.text-align-v(@vertical-align: middle) {
	&:before {
		display: inline-block;
		content: '';
		height: 100%;
		vertical-align: middle;
	}
}
// 用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮，设置颜色的alpha值为0即可
.tapColor(@color:rgba(0,0,0,0)) {
	-webkit-tap-highlight-color: @color;
}

// 边框
.boxLine(@border-width:'1px 1px 1px 1px', @c:@borderColor) {
	// border-style: solid;
	// border-width: @border-width;
	// border-color: @c;

	position: relative;
	overflow: hidden;
	&:before {
		content: '';
		position: absolute;
		box-sizing: border-box;
		width: 200%;
		height: 200%;
		left: 0;
		top: 0;
		border-style: solid;
		border-width: @border-width;
		border-color: @c;
		transform-origin: 0 0;
		transform: scale(0.5);
		pointer-events: none;
	}
}
.t-line {
	.boxLine(1px 0 0 0);
}
.r-line {
	.boxLine(0 1px 0 0);
}
.b-line {
	.boxLine(0 0 1px 0);
}
.l-line {
	.boxLine(0 0 0 1px);
}
.tb-line {
	.boxLine(1px 0 1px 0);
}
.box-line {
	.boxLine(1px 1px 1px 1px);
}
.t-line,
.r-line,
.b-line,
.l-line,
.tb-line,
.box-line {
	// 加粗边框
	&.line-bold {
		border: @borderColor 1px solid;
		&::before {
			border: none;
		}
	}
}

// 去除边框
.no-line {
	border: none !important;
	&:before {
		border: none;
	}
}

// Fonts
@fontEN: -apple-system, 'Helvetica Neue', 'Roboto', 'Segoe UI';
@fontCN: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei';
@fontSans: sans-serif;
@fontDefault: @fontEN, @fontCN, @fontSans;


// 清除左右浮动元素
.clearfix {
	&:after {
		content: '.';
		display: block;
		height: 0;
		visibility: hidden;
		clear: both;
	}
}

// 手指按下或者鼠标移入
.hover {
	position: relative;
	&:after {
		content: ' ';
		.full-abs;
		z-index: 100;
		background: @hoverBg;
		pointer-events: none;
	}
}
// 分隔线
.divider {
	width: 100%;
	min-height: 10px;
	&.tb-line {
		background: @defaultBg;
	}
	&.is-line {
		&:after {
			content: ' ';
			position: absolute;
			top: 5px;
			left: 0;
			width: 100%;
			pointer-events: none;
			border-top: 1px solid @borderColor;
		}
	}
}

// 毛玻璃 filter-blur
.filter-blur {
	backdrop-filter: saturate(80%) blur(2px);
	// filter: blur(2px);
}

// 阴影
.box-shadow {
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}

// 圆角
.box-round {
	overflow: hidden;
	border-radius: 5px;
}
// 窗格
.pane {
	background: @paneBg;
}
// 遮罩
.mask-bg {
	display: none;
	.full-fixed;
	background: @maskBg;

	&.open {
		display: block;
	}
}

// 区块引用
.blockquote {
	display: flex;
	align-items: center;
	&.panel-title {
		margin-left: -@marginH;
	}
	&:before {
		position: relative;
		content: '';
		width: 4px;
		height: 1.1em;
		display: block;
		overflow: hidden;
		border-radius: 0 2px 2px 0;
		background: @tabTxtColorActive;
		color: transparent;
		margin-right: 6px;
	}
}
